import React from 'react'
import '../style/css/compoments/list.css'
import {HomeOutlined,ClockCircleOutlined,EyeOutlined
  } from '@ant-design/icons';
const ListData =(props)=>{
  //创建context
    const mylist = props.mylist
    const mytype = props.mytype
    const getTypeName=(obj)=>{
      let typeName = ''
      mytype&&mytype.forEach(item => {
        if(item.id==obj){
          typeName = item.name
        }
      });
      return typeName
    }
    const goDetail=(obj)=>{
      console.log(obj)
    }
    return (
        <div>
            <div className="list-header">
              <div className="list-name">博客</div>
              <div className="list-total">共{mylist.total}篇</div>
            </div>
              {
                  mylist.records&&mylist.records.map((item,index)=>{
                    return (
                      <div className="list-div" key={index} onClick={() => goDetail(item)}>
                        <div className="list-title">{item.title}</div>
                        <div className="list-context">{item.description}</div>  
                        <div className="list-icon">
                            <span className="list-tag"><HomeOutlined /> <span className="admin-name">{item.userId==1?'管理员':'访客'}</span></span>
                            <span  className="list-tag"><ClockCircleOutlined  /> {item.createTime.substring(0,10)}</span>
                            <span  className="list-tag"><EyeOutlined /> {item.views}人</span>
                            <span className="list-sort">{getTypeName(item.typeId)}</span>
                        </div> 
                      </div>
                    )
                  })
              }
        </div>
    )
}
export default ListData